<template>
  <div class="common-layout">
    <el-container>
      <el-header height="60px">
        <AppHeader />
      </el-header>

      <el-main>
        <router-view />
      </el-main>

      <el-footer>
        <AppFooter />
      </el-footer>
    </el-container>
  </div>
</template>

<script setup>
// P4: 导入你刚创建的组件
import AppHeader from './components/AppHeader.vue'
import AppFooter from './components/AppFooter.vue'
</script>

<style>
/* P4: 全局样式 (重置默认值) */
body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}
.el-header {
  padding: 0;
}
.el-main {
  /* P4: 最小高度, 防止页脚在内容少时上浮 */
  min-height: calc(100vh - 120px); 
}
.el-footer {
  padding: 0;
}
</style>